<template>
  <div class="modal" v-show="isShowModal">
    <div class="modal-inner">
      <div class="modal-inner_title">
        <span>发布文章</span>
        <span><i class="iconfont icon-close" @click="modalCloseClick"></i></span>
      </div>
      <div class="modal-inner_content">
        <div class="modal-inner_items classify">
          <label><i class="iconfont icon-required"></i>分类:</label>
          <RadioGroup @on-change="onChange" v-model="classifys">
            <Radio label="前端"></Radio>
            <Radio label="vue"></Radio>
            <Radio label="html"></Radio>
            <Radio label="css"></Radio>
            <Radio label="webpack"></Radio>
          </RadioGroup>
        </div>
        <div class="modal-inner_items tag">
          <label><i class="iconfont icon-required"></i>标签:</label>
          <Tag closeable isAdd @on-change="onTagChange" v-model="tagss" />
        </div>
        <div class="modal-inner_items cover">
          <label>封面:</label>
          <Upload @success="successUpload" v-model="uploadUrls"></Upload>
        </div>
        <div class="modal-inner_items cover">
          <label>摘要:</label>
          <textarea rows="10" cols="50" style="resize: none" v-model="descriptions" />
        </div>
      </div>
      <div class="modal-inner_options">
        <button class="cancel" @click="modalCloseClick">取消</button>
        <button class="primary" @click="queryPublish">确定发布</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShowModal: {
      type: Boolean,
      default: () => false
    },
    classify: {
      type: String,
      default: () => ''
    },
    tags: {
      type: [Array, String],
      default: () => []
    },
    imgUrl: {
      type: String,
      default: () => ''
    },
    description: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      classifys: this.classify,
      uploadUrls: this.imgUrl,
      descriptions: this.description,
      tagss: this.tags
    }
  },
  methods: {
    // 弹窗关闭
    modalCloseClick() {
      this.$emit('update:isShowModal', false)
    },

    // 分类选择
    onChange(val) {
      this.classifys = val
    },

    // 上传成功后3
    successUpload(url) {
      this.uploadUrls = url
    },

    // 标签添加
    onTagChange(val) {
      this.tagss = val
    },

    // 确认发布
    queryPublish() {
      if (!this.classifys) {
        this.$Message.error('分类不能为空')
        return
      }
      if (!this.tagss.length) {
        this.$Message.error('标签不能为空')
        return
      }
      const params = {
        classify: this.classifys,
        tags: this.tagss,
        imgUrl: this.uploadUrls,
        description: this.descriptions
      }
      this.$emit('update:isShowModal', false)
      this.$emit('queryClick', params)
    }
  }
}
</script>
